<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>我的收藏</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div>
			<swiper :list="imgList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		</div>

		<div class="products">
			<ul class="products_detail" v-for="l in list">
				<li><div>
					<img :src="l.imgs" width="100%"  />
				</div></li>
				<li class="products_l2"><p>{{l.title}}</p>
					<!-- <p>{{l.intro}}</p> -->
				</li>
				<li>
					<ul class="colletion_btn">
						<li>
							<ul>
								
								<li class="products_l3">
									<router-link :to="l.url">
									<input type="button" value="立即申请" class="apply_btn" />
									</router-link>
								</li>
								<li>
									<input @click="del(l)" type="button" value="删除" class="delete_btn" />
								</li>
							</ul>
						</li>
						<!-- <li>
							<input type="button" value="删除" class="apply_btn" />
						</li> -->
						<!-- <li class="products_l1"><p>{{l.info}}</p></li> -->
					</ul>
				</li>
				
			</ul>
			
		</div>
		<div class="btn">
			<input @click="query" type="button" :value="loadText" class="col_more" />
		</div>
		<div style="height:1rem;">

		</div>
	</body>
</template>

<script>
export default {
	data() {
		return {
			params: {
				page: 1,
				limit: 10,
				sidx: 'create_date',
				order: 'desc'
			},
			list: [],
			loading: false,
			more: true,
			list: [],

			imgList: []
		}
	},
	computed: {
		loadText() {
			if (this.more) {
				if (this.loading)
					return '正在加载...'
				else
					return '点击加载更多'
			} else {
				return '没有更多数据'
			}
		}
	},
	created() {
		this.query()
		this.queryImg()
	},
	methods: {
		query() {
			if (!this.more || this.loading) return
			this.loading = true
			this.$http.get('/app/collect/list', {
				params: this.params
			}).then(json => {
				const { code, page } = json
				if (code === 0) {
					const { list } = page
					if (list && list.length > 0) {
						this.list = this.list.concat(list)
					} else {
						this.more = false
					}
					this.params.page++
				}
				this.loading = false
			})
		},
		del(n) {
			this.$http.post('/app/collect/delete', [n.collectId]).then(json => {
				const { code } = json
				if(code === 0) {
					this.$vux.toast.show('删除成功')
					this.list.shift(this.list.indexOf(n))
				}
			})
		},

		queryImg() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'collection' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.imgList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
		}
	}
}
</script>

<style>

</style>